<template>
  <div class="home_card">
    <div class="rowTitle">
      <!-- <span>会员开户审核</span> -->
      <span>{{ $t("Home.index15") }}</span>
      <date-range-picker
        @change="getData"
        v-model="query_time"
        class="date-item"
      />
    </div>
    <ul class="cardContent">
      <li @click="toRoute('5', checkPermission(['openCheck@index']))">
        <img src="~@/assets/images/img13.png" alt="" />
        <div>
          <h2 class="DINfont">{{ openData.open_accounts_no_finished }}</h2>
          <!-- <span>待完善人数</span> -->
          <span>{{ $t("Home.index16") }}</span>
        </div>
      </li>
      <li @click="toRoute('3', checkPermission(['openCheck@index']))">
        <img src="~@/assets/images/img12.png" alt="" />
        <div>
          <h2 class="DINfont">{{ openData.open_accounts_wait_check }}</h2>
          <!-- <span>待审核人数</span> -->
          <span>{{ $t("Home.index17") }}</span>
        </div>
      </li>
      <li @click="toRoute('4', checkPermission(['openCheck@index']))">
        <img src="~@/assets/images/img15.png" alt="" />
        <div>
          <h2 class="DINfont">{{ openData.open_accounts_fail }}</h2>
          <!-- <span>审核失败人数</span> -->
          <span>{{ $t("Home.index18") }}</span>
        </div>
      </li>
      <li @click="toRoute('2', checkPermission(['openCheck@index']))">
        <img src="~@/assets/images/img14.png" alt="" />
        <div>
          <h2 class="DINfont">{{ openData.open_accounts_success }}</h2>
          <!-- <span>审核成功人数</span> -->
          <span>{{ $t("Home.index19") }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import DateRangePicker from "@/components/DateRangePicker/index_shouye";
import { getOpenCount } from "@/api/home";
export default {
  components: {
    DateRangePicker,
  },
  data() {
    return {
      query_time: [],
      openData: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getOpenCount({
        start_time:
          this.query_time && this.query_time[0]
            ? parseInt(this.query_time[0] / 1000)
            : "",
        end_time:
          this.query_time && this.query_time[1]
            ? parseInt(this.query_time[1] / 1000)
            : "",
      })
        .then((res) => {
          if (res.code == 10000) {
            this.openData = res.data;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    toRoute(val, disabled) {
      if (!disabled) {
        return false;
      }
      this.$router.push({
        // name: "开户审核",
        path: "/openList/openCheck",
        query: {
          open_status: val,
        },
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cardContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  li {
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 25px 10%;
    img {
      max-width: 54px;
    }
    div {
      text-align: right;
      min-width: 100px;
    }
  }
}
</style>
